<template>
    <van-cell class="address-list-item" label-class="address-list-item-label" center
              @click="e => $emit('click', e)">
        <template #icon v-if="switchable">
            <van-checkbox class="address-list-item-checkbox" :icon-size="22"
                          v-model="checkedValue"
                          @change="aChecked => $emit('change', aChecked)"/>
        </template>
        <template #title>
            <div class="address-list-item-l1">
                <span class="address-list-item-consignee van-ellipsis">{{address.lastName}}{{address.firstName}}</span>
                <span class="address-list-item-mobile">{{address.mobile}}</span>
                <van-tag type="danger" v-if="address.defaulted">默认</van-tag>
                <van-tag type="primary" v-if="address.tag">{{address.tag}}</van-tag>
            </div>
            <white-space/>
            <div class="address-list-item-address">
                {{location}}
                {{address.address}}
            </div>
        </template>
        <template #right-icon>
            <van-icon name="edit" :size="22" @click="handleToAddressEdit"/>
        </template>
    </van-cell>
</template>

<script>
  import { Cell, Checkbox, Icon, Image, Tag } from "vant"
  import { customer } from "@mall/api-services"
  import WhiteSpace from "@/components/WhiteSpace"

  export default {
    name: "AddressListItem",
    components: {
      WhiteSpace,
      [Cell.name]: Cell,
      [Checkbox.name]: Checkbox,
      [Icon.name]: Icon,
      [Image.name]: Image,
      [Tag.name]: Tag,
    },
    props: {
      address: customer.CustomerAddress,
      switchable: Boolean,
      checked: Boolean,
    },
    computed: {
      checkedValue: {
        get() {
          return this.checked
        },
        set() {
          // checked
        },
      },
      location() {
        const { address } = this
        const { province, city, county } = address
        return `${province}${city}${county}`
      },
    },
    methods: {
      handleToAddressEdit() {
        const { address } = this
        this.$router.push(`/addresses/${address.id}/edit`)
      },
    },
  }
</script>

<style lang="scss" scoped>
    .address-list-item {

        .address-list-item-checkbox {
            margin-right: 9px;
        }

        .address-list-item-l1 {
            display: flex;
            align-items: center;
            align-content: center;
        }

        .address-list-item-consignee {
            display: inline-block;
            width: 80px;
            font-size: 16px;
            font-weight: 700;
        }

        .address-list-item-mobile {
            display: inline-block;
            font-size: 16px;
            font-weight: 500;
        }

        .address-list-item-address {
            color: initial;
            font-size: 14px;
            line-height: 1rem;
        }

        .van-tag {
            margin-left: 4px;
            padding: 0 .4em;
        }
    }
</style>
